<template>
  <div class="head" :style="{ height: height1 + 'vh' }">
    <div class="title1">
      <div class="tex1" @click="tab">
        <button id="1" :class="id === '1' ? 'active' : ''" class="text1">昨日</button>
        <button id="2" :class="id === '2' ? 'active' : ''" class="text1">本月</button>
        <button id="3" :class="id === '3' ? 'active' : ''" class="text1">上月</button>
      </div>
      <div class="tex2">
        结算网点<el-select v-model="value" class="input" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>
    <div class="title2">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="tex1">
            <div class="text1">
              <img class="img" src="@/static/image/gengd.png" alt="">
              <div class="text2">各费用项收支</div>
              <div class="text3">
                <div class="text4">合计：<span class="text5">28288</span></div>
                <div class="text4">收入：<span class="text5">28288</span></div>
                <div class="text4">支出：<span class="text5">28288</span></div>
              </div>
            </div>
            <div style="display: flex;">
              <div class="text6">
                <div class="text7">奖惩 <img class="image1" src="@/static/image/tishi.png"></div>
                <div class="text8">环比<i style="color:red;margin-left: 11px;" class="el-icon-caret-top" /><span
                  style="color: red;"
                >76.00%</span></div>
                <div class="text8 text10">收入：<span class="text9">37.04</span>元</div>
                <div class="text8 text10">收入：<span class="text9">37.04</span>元</div>
              </div>
              <div class="text6">
                <div class="text7">面单 <img class="image1" src="@/static/image/tishi.png"></div>
                <div class="text8">环比<i style="color:red;margin-left: 11px;" class="el-icon-caret-top" /><span
                  style="color: red;"
                >76.00%</span></div>
                <div class="text8 text10">收入：<span class="text9">37.04</span>元</div>
                <div class="text8 text10">收入：<span class="text9">37.04</span>元</div>
              </div>
              <div class="text6">
                <div class="text7">派费 <img class="image1" src="@/static/image/tishi.png"></div>
                <div class="text8">环比<i style="color:red;margin-left: 11px;" class="el-icon-caret-top" /><span
                  style="color: red;"
                >76.00%</span></div>
                <div class="text8 text10">收入：<span class="text9">37.04</span>元</div>
                <div class="text8 text10">收入：<span class="text9">37.04</span>元</div>
              </div>
            </div>
            <div style="display: flex;">
              <div class="text6">
                <div class="text7">中转 <img class="image1" src="@/static/image/tishi.png"></div>
                <div class="text8">环比<i style="color:red;margin-left: 11px;" class="el-icon-caret-top" /><span
                  style="color: red;"
                >76.00%</span></div>
                <div class="text8 text10">收入：<span class="text9">37.04</span>元</div>
                <div class="text8 text10">收入：<span class="text9">37.04</span>元</div>
              </div>
              <div class="text6">
                <div class="text7">总部市场 <img class="image1" src="@/static/image/tishi.png"></div>
                <div class="text8">环比<i style="color:red;margin-left: 11px;" class="el-icon-caret-top" /><span
                  style="color: red;"
                >76.00%</span></div>
                <div class="text8 text10">收入：<span class="text9">37.04</span>元</div>
                <div class="text8 text10">收入：<span class="text9">37.04</span>元</div>
              </div>
              <div class="text6">
                <div class="text7">其他 <img class="image1" src="@/static/image/tishi.png"></div>
                <div class="text8">环比<i style="color:red;margin-left: 11px;" class="el-icon-caret-top" /><span
                  style="color: red;"
                >76.00%</span></div>
                <div class="text8 text10">收入：<span class="text9">37.04</span>元</div>
                <div class="text8 text10">收入：<span class="text9">37.04</span>元</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="tex1">
            <div class="tow1">
              <img class="img1" src="@/static/image/gengd.png" alt="">
              <div class="text1">近七天趋势</div>
            </div>
            <div id="mychart" ref="mychart" class="mychart" />
          </div>
        </el-col>
      </el-row>
    </div>
    <div :style="{ height: height + 'px' }" class="title3">
      <el-row>
        <el-col :span="24">
          <div style="display: flex;flex-wrap: wrap;">
            <div class="tex">
              <div class="text1">
                <div style="display: flex;flex-wrap: wrap;">
                  <div class="text2">
                    扣付日期<el-date-picker
                      v-model="value1"
                      class="input1"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    />
                  </div>
                  <div class="text2">
                    网点层级<el-select v-model="value" class="input1" placeholder="请选择">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </div>
                  <div class="text2">
                    费用大类<el-select v-model="value" class="input1" placeholder="请选择">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </div>
                </div>
                <div style="display: flex;flex-wrap: wrap;" @click="tab1">
                  <button id="1" :class="id1 === '1' ? 'active1' : ''" class="bt">查询</button>
                  <button id="2" :class="id1 === '2' ? 'active1' : ''" class="bt">重置</button>
                  <button id="3" :class="id1 === '3' ? 'active1' : ''" class="bt">导出</button>
                </div>
              </div>
            </div>
            <div class="tex1">
              <div class="text1">共6项</div>
              <div v-if="id2 === false" class="text2" @click="unfold">收起 <i class="el-icon-arrow-up" /></div>
              <div v-else class="text2" @click="unfold">展开 <i class="el-icon-arrow-down" /></div>
            </div>
          </div>
          <div v-if="id2 === false" class="tex2">
            <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ background: '#f6f6f6' }">
              <el-table-column fixed prop="date" label="日期" align="center" />
              <el-table-column prop="name" label="统计日期" align="center" />
              <el-table-column prop="province" label="结算网点" align="center" />
              <el-table-column prop="city" label="费用大类" align="center" />
              <el-table-column prop="address" label="收入" align="center" />
              <el-table-column prop="zip" label="支出" align="center" />
              <el-table-column fixed="right" label="操作" width="100" align="center">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="block" style="display: flex; justify-content: end;margin-top: 20px;">
              <el-pagination
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="khTotal"
                prev-text="上一页"
                next-text="下一页"
                @size-change="khHandleSizeChange"
                @current-change="khHandleCurrentChange"
              />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  components: {},
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      id: '1',
      id1: '1',
      id2: true,
      height: 142,
      height1: 100, // 622
      value1: '',
      sjlData: [120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000],
      Data: ['10.11', '10.12', '10.13', '10.14', '10.15', '10.16', '10.17', '10.18'],
      bjlData: [120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000],
      balData: [20, 30, 40, 30, 20, 30, 40, 30, 20],
      bjl2Data: [50, 40, 30, 20, 30, 40, 50, 60, 50],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  },

  computed: {},

  created() {

  },
  mounted() {
    this.initi()
  },

  methods: {
    tab(e) {
      this.id = e.target.id
    },
    tab1(e) {
      this.id1 = e.target.id
    },
    // 展开收起
    unfold() {
      this.id2 = !this.id2
      if (this.height === 142) {
        this.height = 622
        this.height1 = 120
      } else {
        this.height = 142
        this.height1 = 100
      }
    },
    initi() {
      const option = {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(13,5,30,.6)',
          borderWidth: 1,
          borderColor: '#4ddd8f',
          padding: 5,
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          itemWidth: 10,
          itemHeight: 10,
          top: 60,
          right: 30,
          icon: 'rect',
          textStyle: {
            color: '#c7d3e5'
          }
        },
        grid: {
          top: '25%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.Data,
            axisPointer: {
              type: 'shadow'
            },
            axisTick: {
              show: true,
              length: 4,
              lineStyle: {
                color: 'rgba(199,211,229,0.5)'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(199,211,229,0.5)'
              }
            },
            axisLabel: {
              color: '#c7d3e5'
            }
          }
        ],
        yAxis: [
          {
            name: '单位：元',
            type: 'value',
            max: 180000,
            nameTextStyle: {
              color: '#c7d3e5'
            },
            axisLabel: {
              color: '#c7d3e5'
            },
            axisTick: {
              show: true,
              length: 4,
              lineStyle: {
                color: 'rgba(64,136,254,1)'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(199,211,229,0.3)',
                width: 1,
                type: 'dashed'
              }
            }
          },
          {
            type: 'value',
            scale: true,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(199,211,229,0.3)'
              }
            },
            max: 100,
            min: 0,
            axisLabel: {
              formatter: '{value}%', // 右侧以百分比进行展示
              show: true,
              textStyle: {
                color: '#c7d3e5'
              }
            },
            nameTextStyle: {
              color: '#c7d3e5'
            },
            axisTick: {
              show: true,
              length: 4,
              lineStyle: {
                color: 'rgba(64,136,254,1)'
              }
            }
          }
        ],
        series: [
          {
            name: '收入',
            type: 'line',
            yAxisIndex: 1,
            symbol: 'none',
            data: this.balData,
            itemStyle: {
              color: '#F4B259'
            }
          },
          {
            name: '支出',
            type: 'line',
            yAxisIndex: 1,
            symbol: 'none',
            data: this.bjl2Data,
            itemStyle: {
              color: '#F4B259'
            }
          },
          {
            name: '寄件量',
            type: 'bar',
            barWidth: 14,
            data: this.sjlData,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#2087D0'
                }
              ])
            }
          },
          {
            name: '派费量',
            type: 'bar',
            barWidth: 14,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#30C86D'
                }
              ])
            },
            data: this.bjlData
          }
        ]
      }
      const myChart = echarts.init(this.$refs.mychart) // 图标初始化
      myChart.setOption(option) // 渲染页面
    }

  }
}

</script>
<style  scoped lang="scss">
.head {
  background-color: #F5F5F5;
  padding: 30px;
}

.title1 {
  height: 84px;
  background: #FFFFFF;
  border-radius: 8px;
  display: flex;

  .tex1 {
    display: flex;
    margin: 24px 30px 24px 30px;

    .text1 {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 600;
      width: 64px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      background: #FFFFFF;
      border: 1px solid #B4B4B4;
      color: #333333;
    }

    .active {
      background-color: #2087D0;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #FFFFFF;
      ;
    }
  }

  .tex2 {
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 600;
    color: #666666;
    margin-top: 24px;

    .input {
      width: 286px;
      height: 36px;
      background: #FFFFFF;
      border-radius: 4px;
      margin-left: 12px;
    }
  }
}

.title2 {
  margin-top: 20px;

  .tex1 {
    height: 476px;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 20px 8px;

    .text1 {
      height: 58px;
      background: #FAFAFA;
      border-radius: 4px;
      display: flex;

      .img {
        width: 26px;
        height: 26px;
        margin-top: 16px;
        margin-left: 12px;
      }

      .text2 {
        margin-left: 12px;
        margin-top: 20px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;
      }

      .text3 {
        display: flex;
        justify-content: space-around;
        width: 424px;
        height: 26px;
        background: #FFFFFF;
        line-height: 26px;
        border: 1px solid #EBECEE;
        border-radius: 4px;
        margin-top: 16px;
        margin-left: 12px;

        .text4 {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 600;
          color: #333333;

          .text5 {
            color: #2087D0;
          }
        }
      }

    }

    .text6 {
      width: 284px;
      height: 164px;
      background: #FAFAFA;
      border: 1px solid #EBECEE;
      border-radius: 4px;
      margin: 20px 0 0 20px;
      padding: 30px 20px;
      flex-wrap: wrap;

      .text7 {
        .image1 {
          width: 16px;
          height: 16px;
        }
      }

      .text8 {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #999999;
        margin-top: 11px;
        margin-bottom: 18px;

        .text9 {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 600;
          color: #333333;
        }

      }

      .text10 {
        margin-bottom: 0;
      }
    }

    .tow1 {
      height: 58px;
      background: #FAFAFA;
      border-radius: 4px;
      display: flex;

      .img1 {
        width: 26px;
        height: 26px;
        margin-top: 16px;
        margin-left: 12px;
      }

      .text1 {
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;
        margin-left: 12px;
        margin-top: 20px;
      }
    }
  }

  .mychart {
    height: 380px;
    width: 100%;
  }
}

.title3 {
  height: 142px;
  background: #FFFFFF;
  box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
  border-radius: 8px;
  margin-top: 20px;

  .tex {
    padding-right: 30px;

    .text1 {
      display: flex;
      justify-content: space-between;

      .text2 {
        margin: 40px 30px 26px 30px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;

        .input1 {
          height: 36px;
          background: #FFFFFF;
          border-radius: 4px;
          margin-left: 12px;
        }
      }

      .bt {
        width: 80px;
        height: 36px;
        background: #FFFFFF;
        border: 1px solid #666666;
        border-radius: 4px;
        margin-top: 40px;
        margin-left: 14px;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
      }

      .active1 {
        background: #2087D0;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #FFFFFF;
      }
    }
  }

  .tex1 {
    display: flex;

    .text1 {
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
      margin-left: 31px;
    }

    .text2 {
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #2087D0;
      margin-left: 785px;
    }
  }

  .tex2 {
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 29px;
  }
}
</style>
